<template>
  <view v-if="visible" class="popup-overlay" @click="handleOverlayClick">
    <view class="popup-container" @click.stop>
      <!-- 左上角标题 -->
      <view v-if="topTitle" class="popup-top-title">{{ topTitle }}</view>
      
      <!-- 关闭按钮 -->
      <view class="close-btn" @click="handleCancel">
        <text class="close-icon">×</text>
      </view>
      
      <!-- 中间大标题 -->
      <view v-if="title" class="popup-title">{{ title }}</view>
      
      <!-- 描述文字 -->
      <view v-if="description" class="popup-description">{{ description }}</view>
      
      <!-- 按钮区域 -->
      <view class="popup-buttons">
        <view v-if="showCancel" class="cancel-button" @click="handleCancel">
          {{ cancelText }}
        </view>
        <view v-if="showConfirm"  class="confirm-button" @click="handleConfirm">
          {{ confirmText }}
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'PublicPopup',
  props: {
    // 弹窗显示状态
    visible: {
      type: Boolean,
      default: false
    },
    // 左上角标题
    topTitle: {
      type: String,
      default: ''
    },
    // 中间大标题
    title: {
      type: String,
      default: ''
    },
    // 描述文字
    description: {
      type: String,
      default: ''
    },
    // 确认按钮文字
    confirmText: {
      type: String,
      default: '确认'
    },
    // 取消按钮文字
    cancelText: {
      type: String,
      default: '取消'
    },
    // 是否显示取消按钮
    showCancel: {   
      type: Boolean,
      default: true
    },
    // 是否显示确认按钮
    showConfirm: {
      type: Boolean,
      default: true
    },
    // 点击遮罩是否关闭
    closeOnClickOverlay: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 确认按钮点击
    handleConfirm() {
      this.$emit('confirm');
    },
    // 取消按钮点击
    handleCancel() {
      this.$emit('cancel');
    },
    // 遮罩点击
    handleOverlayClick() {
      if (this.closeOnClickOverlay) {
        this.handleCancel();
      }
    }
  }
};
</script>

<style scoped>
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.popup-container {
  background-color: #ffffff;
  border-radius: 35rpx;
  padding: 40rpx 55rpx 58rpx;
  /* margin: 0 60rpx; */
  max-width: 600rpx;
  width: 100%;
  position: relative;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  height: 380rpx;
  display: flex;
  flex-direction: column;
}

.popup-top-title {
  font-size: 30rpx;
  color: #333333;
  margin-bottom: 24rpx;
  line-height: 1.4;
  font-weight: 550;
}

.close-btn {
  position: absolute;
  top: 24rpx;
  right: 24rpx;
  width: 48rpx;
  height: 48rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  /* background-color: #f5f5f5; */
}

.close-btn:active {
  background-color: #e0e0e0;
}

.close-icon {
  font-size: 55rpx;
  color: #979797 ;
  font-weight: 300;
  /* line-height: 1; */
}

.popup-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #000;
  text-align: center;
  margin-bottom: 24rpx;
  line-height: 1.4;
}

.popup-description {
  font-size: 28rpx;
  color: #000;
  text-align: center;
  line-height: 1.5;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 80rpx;
}

.popup-buttons {
  display: flex;
  gap: 24rpx;
  position: absolute;
  bottom: 40rpx;
  left: 55rpx;
  right: 55rpx;
}

.cancel-button {
  flex: 1;
  height: 95rpx;
  /* background-color: #f5f5f5; */
  border-radius: 45rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: black;
  font-weight: 500;
  border: 1rpx solid #00D4AA;
}

.cancel-button:active {
  /* background-color: #e0e0e0; */
}

.confirm-button {
  flex: 1;
  height: 95rpx;
  background-color: #00D4AA;
   border-radius: 45rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 32rpx;
  color: #ffffff;
  font-weight: 500;
}

.confirm-button:active {
  background-color: #00B899;
}

/* 当只有确认按钮时，按钮占满宽度 */
/*.popup-buttons:has(.confirm-button:only-child) .confirm-button {*/
/*  flex: none;*/
/*  width: 100%;*/
/*}*/
</style>